<template>
  <radio
    class="ui-radio"
    :class="[size ? `is-${size}`:'']"
    :checked="value"
    :disabled="disabled"
    :color="color"
    @change="onChange"
  >
    <slot></slot>
  </radio>
</template>

<script>
export default {
  name: "uiRadio",
  props: {
    value: Boolean,
    size: {
      type: String,
      default: ""
    },
    disabled: Boolean,
    color: {
      type: String,
      default: "#f54305"
    }
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    onChange({ detail }) {
      debugger;
      this.$emit("input", detail.value);
      this.$emit('change', detail.value)
    }
  }
};
</script>

<style scoped lang="scss">
$radio-size-base: 64 / 64;
.ui-radio {
  transform: scale($radio-size-base);
}
</style>
